<template>
  <div class="container">
    <div class="title">
      <h2>角色管理</h2>
      <h5>用于系统角色的管理，并且对角色进行授权管理</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form class="demo-form-inline" :model="queryData">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="queryData.name" placeholder="" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryData.status" placeholder="请输入">
            <el-option v-for="item in status" :key="item.status" :label="item.label" :value="item.status" />
          </el-select>
        </el-form-item>
        <el-form-item class="btn">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="getRoleList()">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small" @click="addRole">新增项目</el-button>
      <el-table
        :data="formData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="name"
          label="角色名称"
          width="200"
        />
        <el-table-column
          prop="description"
          label="角色描述"
          width="200"
        />
        <el-table-column
          prop="address"
          label="状态"
        >
          <template slot-scope="{row}"> {{ row.status ? '启用':'禁用' }}</template>
        </el-table-column>

        <el-table-column
          prop="create_time"
          label="创建时间"
        >
          <template slot-scope="{row}"> {{ row.create_time | parseTime }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="editRow(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delrole(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <RoleDrawer ref="RoleDrawer" />
  </div>

</template>

<script>
import { getRoleListApi, delRoleListApi } from '@/api/role'
import RoleDrawer from './components/roleDrawer.vue'
// import { transListToTreeData } from '@/utils'
export default {
  name: 'RoleIndex',
  components: {
    RoleDrawer
  },
  data() {
    return {
      // 查询参数
      queryData: {
        current: 1,
        pageSize: 10,
        create_time: '',
        name: null,
        status: null
      },
      formInline: {},
      formData: [], // 渲染数据
      status: [{ status: 1, label: '启用' }, { status: 0, label: '禁用' }]
    }
  },
  created() {
    this.getRoleList()
  },
  mounted() {

  },

  methods: {
    // 删除
    async delrole(id) {
      const { data } = await delRoleListApi(id)
      console.log(data)
      if (!data.success) {
        this.$message.error(data.msg)
      } else {
        this.$message.success(data.msg)
      }
      this.getRoleList()
    },
    // 修改事件
    async editRow(rowId) {
      // 获取改行的数据
      // const { data } = await getRoleByIdApi(rowId)
      this.$refs.RoleDrawer.getAllMenu()
      // 赋给弹框里面的表单
      this.$refs.RoleDrawer.getRoleInfo(rowId)

      // 复杂点：一些负责的表单控件需要手动去回显
      // 打开弹框
      // this.$refs.RoleDrawer.drawer = true
    },
    addRole() {
      this.$refs.RoleDrawer.getAllMenu()
      this.$refs.RoleDrawer.drawer = true
    },
    // 重置
    reset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        create_time: '',
        name: null,
        status: null
      }
      this.getRoleList()
    },
    // // 获取权限列表
    // async getRoleMenu() {
    //   const { data } = await getRoleMenuApi()
    //   // console.log('menu', data.data)
    //   this.$refs.RoleDrawer.treeData = transListToTreeData(data.data, 0)
    //   // console.log(this.$refs.RoleDrawer.treeData)
    // },
    // 获取角色列表
    async getRoleList() {
      const { data } = await getRoleListApi(this.queryData)
      this.formData = data.data.rows
      console.log('角色列表', this.formData)
      this.$refs.RoleDrawer.getAllMenu()
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:73px;
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
}

</style>
